<template>
  <a-drawer
    width="34%"
    :visible="modalVisible"
    :body-style="{ paddingBottom: '1vh', paddingRight: '1vw' }"
    @close="() => (modalVisible = false)"
  >
    <div class="pop">
      <div class="pop_top">
        <div class="pop_top_img"></div>
        <div class="pop_top_box">
          <div class="pop_top_box_title">邮政快递</div>
          <div class="pop_top_box_text">快递单号：{{ this.postCode }}</div>
        </div>
      </div>
      <div class="pop_content">
        <a-steps
          progress-dot
          :current="reversedEmslist.length - 1"
          :initial="0"
          direction="vertical"
          v-for="(item, index) in reversedEmslist"
          :key="index"
        >
          <a-step>
            <div slot="title" class="pop_content_title">
              <span v-if="index == 0" style="color: #0072C6">
                {{ item.opName }} <span style="font-size: 1.4vh">{{ item.opTime }}</span>
              </span>
              <span v-else style="color: #959595">
                {{ item.opName }} <span style="font-size: 1.4vh">{{ item.opTime }}</span>
              </span>
            </div>
            <div slot="description" class="pop_content_msg">
              <span v-if="index == 0" style="color: #2c2c2c">{{ item.opDesc }}</span>
              <span v-else style="color: #959595">{{ item.opDesc }}</span>
            </div>
          </a-step>
        </a-steps>
      </div>
      <div class="pop_footer" v-if="postAddress">
        <hr style="background-color: #ccc; height: 1px; border: none"/>
        <div class="pop_footer_piece">
          <div class="pop_footer_piece_round">收</div>
          <div class="pop_footer_piece_text">
            {{ postAddress }}
          </div>
        </div>
      </div>
    </div>
  </a-drawer>
</template>

<script>
import { emsTraceDetail } from '@/api/ems'
export default {
  props: {
    // 快递单号
    postCode: {
      type: String,
      required: false,
      default: ''
    },
    // 收件地址
    postAddress: {
      type: String,
      required: false,
      default: ''
    }
  },
  data () {
    return {
      modalVisible: false,
      emslist: [],
      list: []
    }
  },
  computed: {
    reversedEmslist () {
      return this.emslist.slice().reverse() // 反转emslist数组的顺序
    }
  },
  methods: {
    // 查询快递信息
    async queryPostInfo (callBack) {
      console.log(this.postCode)
      const res = await emsTraceDetail(this.postCode).finally(() => {
        callBack()
      })
      if (res.code === 0) {
        this.emslist = res.data
        if (this.emslist && this.emslist.length > 0) {
          this.modalVisible = true
          this.emslist.forEach((item) => {
            item.opTime = item.opTime.substring(5, 16)
            // console.log(item.opTime.substring(5, 16))
          })
        } else {
          this.$message.warning('快递单号查询数据为空')
          this.modalVisible = false
        }
      } else {
        console.log('查询数据异常')
        this.$message.error('查询数据异常')
        this.modalVisible = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.pop {
  width: 100%;
  height: 95vh;
  padding: 1.5vh;
  .pop_top {
    display: flex;
    width: 100%;
    height: 5vw;
    background: #b1b1b120;
    // background: pink;
    align-items: center;
    .pop_top_img {
      width: 4vw;
      height: 5vw;
      display: flex;
      justify-content: center;
      align-content: center;
      background-size: auto; /* 设置背景图片等比缩放以填充整个容器 */
      background-position: right; /* 设置背景图片在容器中的位置为居中 */
      background-repeat: no-repeat; /* 设置背景图片不重复 */
      background-image: url('../../assets/images/emslogo.png'); /* 设置背景图片的路径 */
    }
    .pop_top_box {
      padding-left: 1vw;
      .pop_top_box_title {
        font-family: MicrosoftYaHei;
        font-weight: bold;
        font-size: 1.8vh;
        color: #2c2c2c;
      }
      .pop_top_box_text {
        font-family: MicrosoftYaHei;
        font-weight: 500;
        font-size: 1.6vh;
        color: #2c2c2c;
      }
    }
  }
  .pop_content {
    padding-top: 2vh;
    width: 100%;
    height: 82%;
    overflow: auto;
    .pop_content_title {
      width: 100%;
      font-family: MicrosoftYaHei;
      font-weight: bold;
      font-size: 1.8vh;
      color: #0072c6;
    }
    .pop_content_title_gray {
      font-family: MicrosoftYaHei;
      font-weight: bold;
      font-size: 1.8vh;
      color: #959595;
    }
    .pop_content_msg {
      padding-top: 0.2vh;
      font-family: MicrosoftYaHei;
      font-weight: 400;
      font-size: 1.7vh;
    }
  }
  .pop_footer {
    // bottom: 1vh;
    width: 100%;
    .pop_footer_piece {
      padding-top: 1vh;
      display: flex;
      align-items: center;
      .pop_footer_piece_round {
        width: 5vh;
        height: 4vh;
        background-color: #cfe8f9;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 2vh;
        color: #0072c6;
      }
      .pop_footer_piece_text {
        font-family: Source Han Sans CN;
        font-weight: bold;
        font-size: 1.8vh;
        color: #2c2c2c;
        line-height: 2.8vh;
        padding-left: 1vh;
      }
    }
  }
}
::v-deep .ant-steps-item-title {
  width: 100%;
}
::v-deep .ant-steps-item-content {
  width: 90%;
}
::v-deep .ant-steps-item-description {
  width: 100%;
}
</style>
